<template>
  <div class="admin-api-docs">
    <div class="header">
      <h2>API 文档</h2>
      <div class="actions">
        <a-button type="primary" @click="openSwaggerUI" target="_blank">
          <template #icon><ApiOutlined /></template>
          打开 Swagger UI
        </a-button>
        <a-button @click="openApiDocs" target="_blank">
          <template #icon><FileTextOutlined /></template>
          查看 OpenAPI JSON
        </a-button>
      </div>
    </div>

    <div class="content">
      <a-card title="API 文档说明" style="margin-bottom: 24px">
        <p>本系统提供完整的 RESTful API 接口，支持博客文章管理、用户认证、简历管理等功能。</p>
        <p>API 文档基于 OpenAPI 3.0 规范生成，提供交互式的接口测试功能。</p>
      </a-card>

      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="Swagger UI" hoverable @click="openSwaggerUI">
            <template #extra>
              <ApiOutlined />
            </template>
            <p>交互式 API 文档界面，可以直接在浏览器中测试 API 接口。</p>
            <p><strong>访问地址：</strong> <code>/swagger-ui.html</code></p>
            <p><strong>功能特点：</strong></p>
            <ul>
              <li>可视化接口文档</li>
              <li>在线接口测试</li>
              <li>参数验证</li>
              <li>响应示例</li>
            </ul>
          </a-card>
        </a-col>
        
        <a-col :span="12">
          <a-card title="OpenAPI JSON" hoverable @click="openApiDocs">
            <template #extra>
              <FileTextOutlined />
            </template>
            <p>标准的 OpenAPI 3.0 规范文档，可用于生成客户端 SDK。</p>
            <p><strong>访问地址：</strong> <code>/api-docs</code></p>
            <p><strong>用途：</strong></p>
            <ul>
              <li>生成客户端代码</li>
              <li>API 集成开发</li>
              <li>接口规范文档</li>
              <li>第三方工具集成</li>
            </ul>
          </a-card>
        </a-col>
      </a-row>

      <a-card title="API 分组" style="margin-top: 24px">
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="文章管理">
            <a-tag color="blue">/api/articles</a-tag>
            文章列表、详情、RSS 等公开接口
          </a-descriptions-item>
          <a-descriptions-item label="用户认证">
            <a-tag color="green">/api/auth</a-tag>
            用户登录、注册、个人信息管理
          </a-descriptions-item>
          <a-descriptions-item label="简历管理">
            <a-tag color="orange">/api/resume</a-tag>
            个人简历、工作经验、技能、项目、教育背景
          </a-descriptions-item>
          <a-descriptions-item label="管理后台">
            <a-tag color="red">/api/admin</a-tag>
            系统管理、内容管理、用户管理、权限管理
          </a-descriptions-item>
          <a-descriptions-item label="文件上传">
            <a-tag color="purple">/api/upload</a-tag>
            文件上传、图片处理
          </a-descriptions-item>
          <a-descriptions-item label="验证码">
            <a-tag color="cyan">/api/captcha</a-tag>
            图形验证码生成
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <a-card title="认证说明" style="margin-top: 24px">
        <a-alert
          message="JWT 认证"
          description="大部分管理接口需要 JWT Token 认证。在 Swagger UI 中，点击右上角的 'Authorize' 按钮，输入 'Bearer {your-token}' 格式的认证信息。"
          type="info"
          show-icon
        />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiOutlined, FileTextOutlined } from '@ant-design/icons-vue'

const openSwaggerUI = () => {
  window.open('/swagger-ui.html', '_blank')
}

const openApiDocs = () => {
  window.open('/api-docs', '_blank')
}
</script>

<style scoped>
.admin-api-docs {
  padding: 24px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header h2 {
  margin: 0;
}

.actions {
  display: flex;
  gap: 12px;
}

.content {
  max-width: 1200px;
}

.ant-card {
  cursor: pointer;
  transition: all 0.3s;
}

.ant-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ant-descriptions {
  background: #fafafa;
}

code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
</style>
